<template>
  <div
      class="merchant-info"
      v-infinite-scroll="()=>{}"
      infinite-scroll-distance="10"
      :infinite-scroll-disabled="true"
  >
    <el-form :model="merchantInfoForm" ref="merchantInfoFormRef" label-width="120px">
      <el-form-item label="修改头像">
        <el-upload
            class="avatar-uploader"
            :action="staticResourcesUrl+'/user/uploadProfilePicture'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :headers="setHeaders()"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" alt="Preview Image" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="修改昵称" prop="nickname" >
        <el-input
            v-model.trim="merchantInfoForm.nickname"
            placeholder="为您的账号起一个不错的昵称吧"
            :clearable="true"
            maxlength="16"
        />
      </el-form-item>
      <el-form-item label="更改登录密码" prop="oldPass">
        <el-input
            v-model="merchantInfoForm.oldPass"
            placeholder="请输入您的旧密码"
            type="password"
            autocomplete="off"
            show-password
            :clearable="true"
            maxlength="32"
        />
      </el-form-item>
      <el-form-item label="更改登录密码" prop="newPass">
        <el-input
            v-model="merchantInfoForm.newPass"
            placeholder="请输入您的新密码"
            type="password"
            autocomplete="off"
            show-password
            :clearable="true"
            maxlength="32"
        />
      </el-form-item>
      <el-form-item label="更改联系方式" prop="phoneNum" >
        <el-input
            v-model.number="merchantInfoForm.phoneNum"
            placeholder="请输入您的新号码"
            clearable
            maxlength="11"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">更新信息</el-button>
        <el-button type="danger" @click="resetForm">重置表格</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {reactive, getCurrentInstance} from 'vue'
import request from "@/http/request";

export default {
  name: "UserInfo",
  data() {
    return {
      imageUrl: '',
      merchantInfoForm: reactive({
        nickname: '',
        oldPass: '',
        newPass: '',
        phoneNum: '',
      }),
    }
  },
  methods: {
    resetForm: function() {
      this.$refs['merchantInfoFormRef'].resetFields();
    },
    setHeaders: function () {
      if(window.localStorage.getItem("token")){
        /*设置统一的header*/
        return {
          Authorization: window.localStorage.getItem("token"),
        }
      }
    },
    handleAvatarSuccess(response, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      if (response.code === 200) {
        this.$tipUtil.successTip(response.msg);
        localStorage.setItem("userHeader", response.data.img);
      } else {
        this.$tipUtil.errTip(response.msg);
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpg'
      const isJPEG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isSizeLt = file.size / 1024 / 1024 < 5
      if (!isJPG && !isJPEG && !isPNG) {
        this.$message.error('上传头像图片只能是 jpg/jpeg/png 格式!')
      }
      if (!isSizeLt) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return (isJPG || isJPEG || isPNG) && isSizeLt
    },
    submit() {
      request({
        url: "/user/updateInfo",
        method: "post",
        data: {
          nickname: this.merchantInfoForm.nickname,
          oldPass: this.merchantInfoForm.oldPass,
          newPass: this.merchantInfoForm.newPass,
          phoneNum: this.merchantInfoForm.phoneNum.toString(),
        },
      }).then((response) => {
        if (response.code === 200) {
          request({
            url: "/user/getUserInfo",
            method: "post",
          }).then((response) => {
            if (response.code === 200) {
              localStorage.setItem("userNickname", response.data.name);
              localStorage.setItem("userPhoneNum", response.data.phone);
            }
          })
          this.$tipUtil.successTip(response.msg);
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
  },
  setup() {
    const form = reactive({
      name: '',
      region: '',
      date1: '',
      date2: '',
      delivery: false,
      type: [],
      resource: '',
      desc: '',
    });
    const { appContext : { config: { globalProperties } } } = getCurrentInstance();
    const staticResourcesUrl = globalProperties.$staticResourcesUrl;
    return {
      form,
      staticResourcesUrl,
    }
  }
}
</script>

<style scoped>
.merchant-info {
  height: 88vh;
  margin: 0;
  padding: 20px 0;
}
.avatar-uploader {
  width: 200px;
  height: 200px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--el-transition-duration-fast);
  position:relative;
  overflow:hidden;
}
.avatar-uploader:hover {
  border-color: var(--el-color-primary);
}
.avatar-uploader .avatar {
  position: absolute;
  top:0;
  left:50%;
  height:100%;
  transform:translateX(-50%);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
</style>